<template>
<fieldset>
    <legend>产品</legend>
    <h1>{{$store.state.Product.tag}}</h1>
    <ul>
        <li v-for="item in products" :key="item.id">
        <span>产品名称</span>
        <b>{{item.title}}</b>
        ---
        <span>商品单价</span>
        <b>{{item.price}}</b>
        ---
         <span>库存</span>
         <b>{{item.inventory}}</b>
         ---
        <button :disabled="item.inventory==0" @click="add(item)">+点击加入购物车</button>
       </li> 
    </ul>
</fieldset>
</template>
<script>
// 引入赋值函数
import {mapActions,mapState} from "vuex"
export default{
    mounted(){
        this['Product/FETCH_PRODUCT']()
    },
    computed:{
        ...mapState("Product",['products'])
    },
    methods:{
        ...mapActions(['Product/FETCH_PRODUCT', "Cart/GET_PRODUCT"]),
        // ...mapMutations('Product',['DECREMNT_INVENTORY']),
        // 调用Cart
        add(item){
             this['Cart/GET_PRODUCT'](item);
            //  this.DECREMNT_INVENTORY(item)
        }
    }
}
</script>